<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true"
               :model="dataForm"
               class="dadeFrom">
        <el-input v-model="dataForm.groupName"
                  placeholder="群组名称"
                  style="width: 200px"></el-input>
        <el-input v-model="dataForm.groupNum"
                  placeholder="群组编号"
                  style="width: 200px"></el-input>
        <el-button @click="searchData()"
                   type="primary">查询</el-button>
        <el-button @click="handleReset()"
                   type="primary">重置</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card"
             style="margin-top: 10px;">
      <el-button type="success"
                 size="mini"
                 @click="hanlleAdd()">创建群组</el-button>
      <el-button type="danger"
                 size="mini"
                 @click="handleDelete()">批量删除</el-button>
      <el-table :data="dataList"
                style="width: 100%;margin-top: 20px;"
                @selection-change="handleSelectionChange"
                v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column type="index"
                         label="序号"
                         align="center">
        </el-table-column>
        <el-table-column prop="dictName"
                         label="群组名称"
                         align="center">
                         
          <template slot-scope="scope">
            {{scope.row.dictName}}
            <!-- <el-button type="text"
                       @click="handleGroup(scope.row.id)">{{scope.row.dictName}}</el-button> -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="群组编号"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="handleGroup(scope.row.id)">{{scope.row.dictValue}}</el-button>
          </template>
        </el-table-column> -->
        <el-table-column prop="remark"
                         label="备注"
                         align="center">
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="small"
                       @click="handlePerson(scope.row.id)">人员配置</el-button>
            <el-button type="primary"
                       size="small"
                       @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger"
                       size="small"
                       @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination :total="total"
                  :pageNum="pageNum"
                  :pageSize="pageSize"
                  @pageChange="pageChange" />
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog title="群组配置"
               :visible.sync="dialogVisible"
               width="40%">
      <div>
        <div style="padding-left: 70px;">
          群组名称：<el-input v-model="form.groupName"
                    placeholder="群组名称"
                    style="width: 200px"></el-input>
        </div>
        <!-- <div style="margin-top: 20px;">
          群组编号(自定义群组)： <el-input v-model="form.groupNum"
                    placeholder="群组编号"
                    style="width: 200px"></el-input> -->
        <!-- </div> -->
        <div style="padding-left: 96px;">
          备注：<el-input v-model="form.remark"
                    type="textarea"
                    :rows="2"
                    placeholder="备注"
                    style="width: 400px;margin-top: 20px"></el-input>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false"
                   size="mini">取 消</el-button>
        <el-button type="primary"
                   @click="handleSubmit()"
                   size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 人员弹框 -->
    <sendDialog ref="send"
                @fetchGroupId="fetchGroupId(arguments)"></sendDialog>
  </div>
</template>

<script>
import axios from "axios";
import sendDialog from '../components/sendDialog copy'
export default {
  data () {
    return {
      loading:true,
      dataList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      id: null,
      latnIdList: [],
      dialogVisible: false,
      ids: [],
      dataForm: {
        groupName: '',
        groupNum: ''
      },
      form: {
        groupName: '',
        groupNum: '',
        remark: '',
      }
    }
  },
  created () {
    // this.fetchTableList()
  },
  activated: function () {
    this.fetchTableList()
  },
  components: {
    sendDialog
  },
  methods: {
    handleGroup (id) {
      this.$router.push({
        path: '/custominfo',
        query: {
          id
        }
      })
    },
    fetchGroupId (params) {
      let staffIds = []
      let orgIds = []
      if (params[0]) {
        params[0].map(item => {
          staffIds.push(item.staffId)
        })
      }
      if (params[1]) {
        params[1].map(item => {
          orgIds.push(item.orgId)
        })
      }
      this.$http({
        url: this.$http.adornUrl('staffsysdictdata/saveDuStaffTag'),
        method: 'post',
        data: this.$http.adornData({
          staffIds: staffIds,
          orgIds: orgIds,
          tagId: this.id
        })
      }).then(res => {
        if (res.data.code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.dialogVisible = false
          this.fetchTableList()
        }
      })
    },
    handlePerson (id) {
      this.id = id
      this.$refs.send.init('人员配置', null, id)
    },
    handleReset () {
      this.dataForm.groupName = ""
      this.dataForm.groupNum = ""
    },
    handleSubmit () {
      if (this.id) {
        this.fetchUpdateGroup()
      } else {
        this.fetchAddGroup()
      }
    },
    fetchAddGroup () {
      this.$http({
        url: this.$http.adornUrl('sysdictdata/save'),
        method: 'post',
        data: this.$http.adornData({
          dictName: this.form.groupName,
          dictValue: this.form.groupNum,
          dictType: 'du_user_tag',
          remark: this.form.remark
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.fetchTableList()
          this.dialogVisible = false
        }
      })
    },
    fetchUpdateGroup () {
      this.$http({
        url: this.$http.adornUrl('sysdictdata/update'),
        method: 'post',
        data: this.$http.adornData({
          id: this.id,
          dictName: this.form.groupName,
          dictValue: this.form.groupNum,
          dictType: 'du_user_tag',
          remark: this.form.remark,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.fetchTableList()
          this.dialogVisible = false
        }
      })
    },
    hanlleAdd () {
      this.id = null
      this.form.groupName = ""
      this.form.groupNum = ""
      this.form.remark = ""
      this.dialogVisible = true
    },
    // 多选
    handleSelectionChange (val) {
      this.ids = []
      val.map(item => {
        this.ids.push(item.id)
      })
    },
    // 点击搜索
    searchData () {
      this.fetchTableList()
    },
    // 获取表格数据
    fetchTableList () {
      this.loading = true
      const { groupName, groupNum } = this.dataForm
      this.$http({
        url: this.$http.adornUrl('sysdictdata/listByUserForDuZdy'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          dictName: groupName,
          dictValue: groupNum
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(()=>{
            this.loading = false
            this.total = data.page.totalCount
          this.dataList = data.page.list
          },1000)
          
        } else {
          this.$message.error(data.msg);
        }
      })
    },
    //编辑 
    handleEdit (id) {
      this.id = id
      this.$http({
        url: this.$http.adornUrl(`sysdictdata/info/${id}`),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dialogVisible = true
          this.form.groupName = data.sysDictData.dictName
          this.form.groupNum = data.sysDictData.dictValue
          this.form.remark = data.sysDictData.remark
        }
      })
    },
    // 删除
    handleDelete (id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        ids = this.ids
        if (ids.length == 0) {
          this.$message.error('请先选择要删除的选项')
          return false
        }
      }
      this.$confirm(`您确定要删除吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('sysdictdata/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.fetchTableList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => { })
    },
    // 再次提醒
    // 分页
    pageChange (page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList()
    }
  }
};
</script>
<style scoped>
.el-dialog__body {
  padding: 0 20px;
}
</style>
